<template>
  <div class="registerDetail" ref="contentData">
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail_header flex">
      <div class="factTask" v-if="dataSource.isFactTask">厂家</div>
      <div class="detail_header_lt">
        <div class="carNo flex">
          {{ dataSource.taskName }}
          <div class="status">{{ dataSource.oneBillStauts }}</div>
        </div>
        <div class="hank flex">
          <div class="name" v-if="dataSource.customerName">
            {{ dataSource.customerName }}
          </div>
          <div class="name">{{ dataSource.carModelName }}</div>
          <!-- <div class="name isVip" v-if="dataSource.isHuiYuan">VIP</div> -->
        </div>
      </div>
      <div class="detail_header_rt">
        <a class="flex con_txt" @click="handChangeTab()">
          <!-- <i class="iconfont icon-tel"></i> -->
          联系客户
        </a>
      </div>
    </div>

    <!-- 底部tab -->
    <div class="tabBarBox">
      <van-tabs v-model="tabActive">
        <van-tab title="任务信息">
          <div class="tabCar">
            <div class="formData">
              <van-field
                v-model="dataSource.taskDes"
                name="任务描述"
                label="任务描述"
                type="textarea"
                input-align="left"
                readonly
                autosize
              />
              <van-field
                v-model="dataSource.taskTypeName"
                name="任务类型"
                label="任务类型"
                input-align="right"
                readonly
              />

              <van-field
                v-model="dataSource.taskCreateTime"
                name="任务开始时间"
                label="任务开始时间"
                input-align="right"
                readonly
              />
              <van-field
                v-model="dataSource.shuldFollowTime"
                name="应跟进时间"
                label="应跟进时间"
                input-align="right"
                readonly
              />

              <van-field
                v-model="dataSource.taskPerson"
                name="任务跟进人员"
                label="任务跟进人员"
                input-align="right"
                readonly
              />

              <van-field
                v-model="dataSource.lastFollowInTime"
                name="最近跟进时间"
                label="最近跟进时间"
                input-align="right"
                readonly
              />
              <!-- <van-field
                v-model="dataSource.followType"
                name="最近跟进方式"
                label="最近跟进方式"
                input-align="right"
                readonly
              ></van-field> -->

              <van-field
                v-model="dataSource.isHYCar"
                name="是否会员绑车"
                label="是否会员绑车"
                input-align="right"
                readonly
              />
              <van-field
                v-model="dataSource.taskResult"
                name="是否到店"
                label="是否到店"
                input-align="right"
                readonly
              />
            </div>
          </div>
          <div class="relationTitle">本车关联任务</div>
          <div
            class="orderList"
            v-if="relevanceList && relevanceList.length != 0"
          >
            <div
              class="orderItem"
              v-for="(item, index) in relevanceList"
              :key="index"
            >
              <div class="orderItem_header">
                <div class="orderItem_lt" @click="getDetail(item.billId)">
                  <div class="carNo">{{ item.taskName }}</div>
                  <div class="carStatus">
                    {{ item.oneBillStatus }}
                  </div>
                </div>
                <div class="orderItem_rt">跟进人：{{ item.taskPerson }}</div>
              </div>
              <div class="orderItem_content" @click="getDetail(item.billId)">
                <div class="orderItem_data time">
                  <div class="order_label">任务描述</div>
                  <div class="txt">{{ item.taskDes ? item.taskDes : "-" }}</div>
                </div>

                <div class="orderItem_data time">
                  <div class="order_label">应跟进时间</div>
                  <div class="txt">
                    {{ item.shuldFollowTime ? item.shuldFollowTime : "-" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
          <div class="relationTitle">跟进信息</div>
          <div
            class="followInfo"
            v-if="dataSource.followEntry && dataSource.followEntry.length != 0"
          >
            <div
              class="followInfo_item flex"
              v-for="(item, index) in dataSource.followEntry"
              :key="index"
            >
              <div class="followInfo_lt">
                <div class="followInfo_time">{{ item.followDate }}</div>
                <i class="iconfont icon-circle"></i>
              </div>

              <div class="followInfo_rt">
                <div class="followInfo_num">{{ item.followNumber }}</div>
                <div class="followInfo_data">
                  跟进方式：{{ item.followType }}
                </div>
                <div class="followInfo_data">
                  跟进结果：{{ item.followResult }}
                </div>
                <div class="followInfo_data">
                  跟进时间：{{ item.followDate }}
                </div>
                <div class="followInfo_data">
                  跟进备注：{{ item.folloeNote }}
                </div>
                <div class="followInfo_data">
                  下次跟进时间：{{ item.nextFollowDate }}
                </div>
                <div class="followInfo_data flex">
                  <div>跟进补充：</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </van-tab>
        <van-tab title="车辆信息">
          <div class="tabCar">
            <div class="formData">
              <van-field
                readonly
                v-model="carInfo.fixCenterName"
                name="维修中心"
                label="维修中心"
                input-align="right"
              />

              <van-field
                v-model="carInfo.serverPsnName"
                name="服务顾问"
                label="服务顾问"
                input-align="right"
                readonly
              />

              <van-field
                v-model="carInfo.carNo"
                name="车牌号"
                label="车牌号"
                input-align="right"
                readonly
              />

              <van-field
                v-model="carInfo.vinCode"
                name="车架号"
                label="车架号"
                input-align="right"
                readonly
              />

              <van-field
                v-model="carInfo.carModelNameName"
                name="车型"
                label="车型"
                input-align="right"
                readonly
              />
              <van-field
                v-model="carInfo.lastIn"
                name="上次进场时间"
                label="上次进场时间"
                input-align="right"
                readonly
              />
              <van-field
                v-model="carInfo.carMile"
                name="当前里程数"
                label="当前里程数"
                input-align="right"
                readonly
              >
                <template slot="button">km</template>
              </van-field>
              <van-field
                v-model="carInfo.currCarMile"
                name="车辆里程数"
                label="车辆里程数"
                input-align="right"
                readonly
              >
                <template slot="button">km</template>
              </van-field>
              <van-field
                v-model="carInfo.inusuranceType"
                name="保险类型"
                label="保险类型"
                input-align="right"
                readonly
              />
              <van-field
                v-model="carInfo.inusuranceComName"
                name="保险公司"
                label="保险公司"
                input-align="right"
                readonly
                id="targetId"
              />
              <van-field
                v-model="carInfo.inusuranceDate"
                name="保险到期日"
                label="保险到期日"
                input-align="right"
                readonly
              />

              <!-- <van-field
                v-model="carInfo.mileage"
                name="标签"
                label="标签"
                input-align="left"
                readonly
              >
                <template slot="input">
                  <div class="labelList">
                    <div
                      class="label_item"
                      v-for="(item, index) in carInfo.label"
                      :key="index"
                    >
                      {{ item }}
                    </div>
                  </div>
                </template>
              </van-field> -->
            </div>
          </div>
          <div class="relationTitle">联系人信息</div>

          <div class="contactbox">
            <div
              class="contactItem flex"
              v-if="dataSource.customerName || dataSource.mobile"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">客户</div>
                  <div class="name">
                    {{
                      dataSource.customerName ? dataSource.customerName : "-"
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.mobile ? dataSource.mobile : "-" }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.mobile">
                <a @click="handleTel(dataSource.mobile)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i
                  class="iconfont icon-wx"
                  @click.stop="getExList(dataSource)"
                ></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.ownerName || dataSource.ownerPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">车主</div>
                  <div class="name">
                    {{ dataSource.ownerName ? dataSource.ownerName : "-" }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.ownerPhone ? dataSource.ownerPhone : "-" }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.ownerPhone">
                <a @click="handleTel(dataSource.ownerPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i @click="getExList(dataSource)" class="iconfont icon-wx"></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.contactPeople || dataSource.contactPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">送修人</div>
                  <div class="name">
                    {{
                      dataSource.contactPeople ? dataSource.contactPeople : "-"
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.contactPhone ? dataSource.contactPhone : "-" }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.contactPhone">
                <a @click="handleTel(dataSource.contactPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i class="iconfont icon-wx" @click="getExList(dataSource)"></i>
              </div>
            </div>
          </div>
          <div class="relationTitle">车辆维修履历</div>
          <div class="repairData" v-if="repairList && repairList.length != 0">
            <div
              class="repairItem"
              v-for="(item, index) in repairList"
              :key="index"
              @click="goRepairDetail(item)"
            >
              <div class="item_title flex">
                <div class="txt">履历编号：{{ item.repairNumber }}</div>
                <i class="iconfont icon-right"></i>
              </div>
              <div class="item_content">
                <div class="item_contentbox flex">
                  <div class="item_data flex">
                    <div class="item_data_label">工单类型：</div>
                    <div class="item_data_value">
                      {{ item.repairWorkBillType }}
                    </div>
                  </div>
                  <div class="item_data flex">
                    <div class="item_data_label">服务顾问：</div>
                    <div class="item_data_value">
                      {{ item.serverPersonName }}
                    </div>
                  </div>
                </div>

                <div class="item_content_data">
                  <div class="item_data flex">
                    <div class="item_data_label">进场时间：</div>
                    <div class="item_data_value">{{ item.repairBizDate }}</div>
                  </div>
                  <div class="item_data flex">
                    <div class="item_data_label">合计金额：</div>
                    <div class="item_data_value">
                      {{ item.repairVoucherAmt }}元
                    </div>
                  </div>
                  <div class="item_data flex">
                    <div class="item_data_label">卡券抵用金额：</div>
                    <div class="item_data_value">
                      {{ item.repairTotalSum }}元
                    </div>
                  </div>
                  <div class="item_data item_remark">
                    <div class="item_data_label item_data_width">
                      人工操作：
                    </div>
                    <div class="item_data_value txt">
                      {{ item.repairRstRemark }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </van-tab>
        <!-- <van-tab title="跟进信息">
          <div
            class="followInfo"
            v-if="dataSource.followEntry && dataSource.followEntry.length != 0"
          >
            <div
              class="followInfo_item flex"
              v-for="(item, index) in dataSource.followEntry"
              :key="index"
            >
              <div class="followInfo_lt">
                <div class="followInfo_time">{{ item.followDate }}</div>
                <i class="iconfont icon-circle"></i>
              </div>

              <div class="followInfo_rt">
                <div class="followInfo_num">{{ item.followNumber }}</div>
                <div class="followInfo_data">
                  跟进方式：{{ item.followType }}
                </div>
                <div class="followInfo_data">
                  跟进结果：{{ item.followResult }}
                </div>
                <div class="followInfo_data">
                  到店时间：{{ item.followDate }}
                </div>
                <div class="followInfo_data">
                  跟进备注：{{ item.folloeNote }}
                </div>
                <div class="followInfo_data">
                  下次跟进时间：{{ item.nextFollowDate }}
                </div>
                <div class="followInfo_data flex">
                  <div>跟进补充：</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </van-tab> -->
        <div class="addBtn">
          <div
            class="orderItem_filebox"
            @click="addFollow"
            :class="dataSource.twoBillStatus == '邀约成功' ? 'btn_disable' : ''"
          >
            <i class="iconfont icon-add"></i>
            添加跟进记录
          </div>
        </div>
        <!--
        <van-tab title="客户信息">
          <div class="contactbox">
            <div
              class="contactItem flex"
              v-if="dataSource.customerName || dataSource.mobile"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">客户</div>
                  <div class="name">
                    {{
                      dataSource.customerName ? dataSource.customerName : '-'
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.mobile ? dataSource.mobile : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.mobile">
                <a @click="handleTel(dataSource.mobile)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i
                  class="iconfont icon-wx"
                  @click.stop="getExList(dataSource)"
                ></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.ownerName || dataSource.ownerPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">车主</div>
                  <div class="name">
                    {{ dataSource.ownerName ? dataSource.ownerName : '-' }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.ownerPhone ? dataSource.ownerPhone : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.ownerPhone">
                <a @click="handleTel(dataSource.ownerPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i @click="getExList(dataSource)" class="iconfont icon-wx"></i>
              </div>
            </div>
            <div
              class="contactItem flex"
              v-if="dataSource.contactPeople || dataSource.contactPhone"
            >
              <div class="contact_lt">
                <div class="header flex">
                  <div class="txt">送修人</div>
                  <div class="name">
                    {{
                      dataSource.contactPeople ? dataSource.contactPeople : '-'
                    }}
                  </div>
                </div>
                <div class="tel">
                  {{ dataSource.contactPhone ? dataSource.contactPhone : '-' }}
                </div>
              </div>
              <div class="contact_rt" v-if="dataSource.contactPhone">
                <a @click="handleTel(dataSource.contactPhone)">
                  <i class="iconfont icon-tel"></i>
                </a>
                <i class="iconfont icon-wx" @click="getExList(dataSource)"></i>
              </div>
            </div>
          </div>
        </van-tab> -->

        <!-- <van-tab title="预约记录">
          <div class="orderList" v-if="applyList && applyList.length != 0">
            <div
              class="orderItem"
              v-for="(item, index) in applyList"
              :key="index"
            >
              <div class="orderItem_header">
                <div class="orderItem_lt" @click="goApplyDetail(item)">
                  <div class="carNo">{{ item.carNo }}</div>
                  <div class="carStatus">{{ item.billStatus }}</div>
                </div>
                <div class="orderItem_rt">
                  <a @click="handleTel(dataSource.mobile1)">
                    <i class="iconfont icon-tel"></i>
                  </a>
                  <div class="iconfont icon-wx" @click="getExList(item)"></div>
                </div>
              </div>
              <div class="orderItem_content" @click="goApplyDetail(item)">
                <div class="orderItem_data">
                  <div class="order_label">客户名称</div>
                  <div class="txt">{{ item.customerName }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">所属服务顾问</div>
                  <div class="txt">{{ item.empName }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">车型</div>
                  <div class="txt">{{ item.carModel }}</div>
                </div>
                <div class="orderItem_data">
                  <div class="order_label">工单类型</div>
                  <div class="txt">{{ item.workBillType }}</div>
                </div>
                <div class="orderItem_data time">
                  <div class="order_label">预约进场时间</div>
                  <div class="txt">{{ item.dateIn }}</div>
                </div>
              </div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
          <div class="addBtn">
            <div class="orderItem_filebox" @click="applyRepair">
              <i class="iconfont icon-add"></i>
              新增预约
            </div>
          </div>
        </van-tab> -->
        <van-tab title="卡券信息">
          <div class="cardList" v-if="cardList && cardList.length != 0">
            <div
              class="cardItem"
              v-for="(item, index) in cardList"
              :key="index"
            >
              <div class="box flex">
                <div class="cardItem_lt">
                  <div class="price_icon">
                    <span>¥</span>
                    <span class="txt">{{ item.amount }}</span>
                  </div>
                  <div class="name">{{ item.typeName }}</div>
                </div>
                <div class="cardItem_rt">
                  <div class="label_name flex">
                    <div class="label_txt">{{ item.typeName }}</div>
                    <div class="label_txt1">{{ item.couponsName }}</div>
                  </div>
                  <div class="label_time">{{ item.usedDate }}领用</div>
                  <div class="label_time">{{ item.expireDate }}到期</div>
                </div>
              </div>
              <div class="cardNo">券号{{ item.ticketNumber }}</div>
            </div>
          </div>
          <van-empty class="noContent martop" description="暂无数据" v-else />
        </van-tab>
      </van-tabs>
    </div>
    <van-dialog
      v-model="showDialog"
      title=""
      show-cancel-button
      :showConfirmButton="false"
    >
      <div class="contact_list">
        <div
          class="contact_item flex"
          v-for="(item, index) in contactList"
          :key="index"
        >
          <div class="contact_lt flex">
            <img v-if="item.avatar" class="contact_header" :src="item.avatar" />
            <div class="contact_name">
              {{ item.remark ? item.remark : item.name }}
            </div>
            <div class="contact_com_wx" v-if="item.type == 1">@微信</div>
            <div class="contact_com" v-if="item.type == 2">
              @{{ item.corpName ? item.corpName : item.corpFullName }}
            </div>
          </div>
          <div class="contact_btn" @click="runWxChat(item)">联系</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  Search,
  Empty,
  Field,
  Form,
  Uploader,
  DatetimePicker,
  Tab,
  Tabs,
  ImagePreview,
  Toast,
  Notify,
  Dialog,
} from "vant";
import taskApi from "@/api/taskApi";
import repairApi from "@/api/repairApi";
import { getCookies, isPhone } from "@/utils/util.js";
import carApi from "@/api/carApi";
import store from "@/store";
import axios from "axios";
import qs from "qs";
const base_url = process.env.BASE_API;
export default {
  name: "taskCenterDetail",
  components: {
    Search,
    Empty,
    Field,
    Form,
    Uploader,
    DatetimePicker,
    Tab,
    Tabs,
    ImagePreview,
    Toast,
    Notify,
    Dialog,
  },
  data() {
    return {
      showTimerPicker: false,
      dataSource: {
        billId: "1", //单据id
        taskTypeName: "", //任务类型
        taskName: "", //任务名称
        oneBillStatus: "", //任务一级状态
        twoBillStatus: "", //任务二级状态
        carModelName: "", //车型
        customerName: "", //客户名称
        mobile: "", //电话
        ownerName: "", //车主姓名
        ownerPhone: "", //车主电话
        contractPeople: "", //送修人姓名
        contractPhone: "", //送修电话
        taskCreateTime: "", //任务生成时间
        carNo: "", //车牌号
        carId: "", //车牌ID
        taskPerson: "", //任务跟进人
        lastFollowInTime: "", //最近跟进时间
        followType: "", //跟进方式
        taskDes: "", //任务描述
        shuldFollowTime: "",
        currCarMile: "",
        followEntry: [
          {
            entryId: "1", //分录ID
            followDate: "08-09", //跟进日期
            followNumber: "2099233", //跟进编码
            nextFollowDate: "2023-07-07", //下次跟进日期
            followResult: "预约回店", //跟进结果
            followType: "手机", //跟进方式
            followSupple: "", //跟进补充
            failed: "", //战败原因
            followPerson: "张三", //跟进人
            followNote: "跟进备注", //跟进备注
          },
          {
            entryId: "1", //分录ID
            followDate: "08-09", //跟进日期
            followNumber: "2099233", //跟进编码
            nextFollowDate: "2023-07-07", //下次跟进日期
            followResult: "预约回店", //跟进结果
            followType: "手机", //跟进方式
            followSupple: "", //跟进补充
            failed: "", //战败原因
            followPerson: "张三", //跟进人
            followNote: "跟进备注", //跟进备注
          },
        ],

        timer: "2022-01-01 10:20:20",
        brand: "帕拉梅拉",
        repairId: "厦门保时捷",
        userName: "张某某",
        car: "",
        vin: "LAAHHHHASSSSSAa",
        carNo: "",
        tel: "",
        repair: "",
        mileage: "2200",
        label: ["活跃客户", "8年车", "男"],
        isFactTask: "", //是否厂家任务
        isHuiYuan: "", //是否会员客户
        isHYCar: "", //是否会员绑定车辆
        taskResult: "",
      },
      uploader: [],
      columns: [],
      showSelectPicker: false,
      disabled: false,
      detailId: "",
      tabActive: 0,
      recordList: [],
      statusList: [
        { name: "已处理", code: 1, check: false },
        { name: "未处理", code: 2, check: false },
      ],
      userId: getCookies("userId"), //用户ID，必填，String
      carInfo: {
        id: "", //单车id
        vinCode: "", //车架号
        fixCenterId: "", //维修中心ID
        fixCenterName: "", //维修中心名称
        fixCenterNumber: "", //维修中心编码
        serverPsnId: "", //所属服务顾问ID
        serverPsnName: "", //所属服务顾问名字
        serverPsnNumber: "", //所属服务顾问编码
        carModelId: "", //车型ID
        carModelNameName: "", //车型名称
        carModelNumber: "", //车型编码
        lastIn: "", //上次进场时间
        carMile: "", //行驶里程数
        deliverTime: "", //购车时间
        inusuranceDate: "", //保险到期时间
        repairtime: "", //保修到期时间
        label: [], //标签
        inusuranceComName: "", //保险公司
        inusuranceType: "", //保险类型
        currCarMile: "", //当前里程数
      },
      cardList: [],

      repairList: [
        // {
        //   repairNo: "SRGGGGGAAA-001",
        //   name: "一般工单",
        //   serviceName: "张某某",
        //   time: "2023-09-01 15:30",
        //   allPrice: 2020,
        //   carPrice: 1000,
        //   remark:
        //     "更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池；更换蓄电池",
        //   status: "已开工单",
        // },
      ],
      applyParams: {
        codeNo: "", //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: "", //预约开始时间，日期yyyy-MM-dd
        endDateIn: "", //预约结束时间，日期yyyy-MM-dd
        fixCenterId: "", //维修中心ID值
        serverPsnId: "", //所属服务顾问，ID值
        billStatus: "", //预约单状态
        bookingType: "", //预约单类型
        fixCenterName: "",
        serverPsnName: "",
        enDateIn: "",
        billSatus: "",
      },
      relevanceParams: {
        codeNo: "", //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        oneBillStatus: "", //任务一级状态
        twoBillStatus: "", //任务二级状态
        taskTypeId: "", //任务类型ID值
        taskPersonId: "", //任务跟进人，ID值
        fixCenterId: "",
        serverPsnId: "",
        taskStartCreateTime: "",
        taskEndCreateTime: "",
        isExceed: "", //是否逾期，1为是，0为否
        isGenRepBook: "", //是否生成维修预约单
        billId: "", //本身单据ID，此为详细界面使用
        carId: "", //车辆ID，此为详细界面使用
        isFactTask: "", //是否厂家任务
        isHuiYuan: "", //是否会员客户
        isHYCar: "", //是否会员绑定车辆
        userId: getCookies("userId"), //用户ID，必填，String
      },
      applyList: [],
      relevanceList: [],
      repairRequestParams: {
        codeNo: "", //车架号或者车牌号，String，必填
        pageNo: 1, //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
        startDateIn: "", //进场开始时间，日期yyyy-MM-dd
        endDateIn: "", //进场结束时间，日期yyyy-MM-dd
        startFinishDate: "", //完工开始时间，日期yyyy-MM-dd
        endFinishDate: "", //完工结束时间，日期yyyy-MM-dd
        startSettleTime: "", //结算开始时间，日期yyyy-MM-dd
        endSettleTime: "", //结算结束时间，日期yyyy-MM-dd
        workBillType: "", //工单类型，枚举
        serverPsnId: "", //维修中心ID
        fixCenterId: "", //服务顾问ID
        userId: getCookies("userId"), //用户ID，必填，String
      },
      showDialog: false,
      contactList: [
        // {
        //   avatar: "车架号或者车牌号，必填车架号或者车牌号，必填",
        //   remark: "车架号或者车牌号，必填车架号或者车牌号，必填",
        //   name: "车架号或者车牌号，必填车架号或者车牌号，必填",
        //   type: 1,
        //   corpName: "厦门建发",
        // },
      ],
    };
  },

  mounted() {
    if (localStorage.getItem("taskBillId")) {
      this.detailId = localStorage.getItem("taskBillId");
      this.getDetail(this.detailId);
    }
  },
  methods: {
    // 获取外部联系人信息
    getExList(data) {
      axios({
        url: `${base_url}/proxy/ext/user/getExList`,
        method: "post",
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { carNo: data.carNo, name: data.customerName },
          { encode: false }
        ),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          satoken: getCookies("token"),
        },
      }).then((res) => {
        if (res.data && res.data.data && res.data.data.length != 0) {
          this.contactList = res.data.data;
          this.showDialog = true;
        } else {
          Notify({ type: "danger", message: "未找到相关联系人" });
        }

        console.log("获取外部联系人信息:", res);
      });
    },
    runWxChat(data) {
      let vm = this;
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: "post",
        data: qs.stringify(
          // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
          { url: location.href.split("?")[0], type: "app" },
          { encode: false }
        ),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          satoken: getCookies("token"),
        },
      }).then((res) => {
        console.log("jsdkConfig:", res);
        let jsdk = res.data.data;
        localStorage.setItem("jsdk", JSON.stringify(res.data.data));
        wx.agentConfig({
          corpid: jsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: jsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: ["openEnterpriseChat"], //必填，传入需要使用的接口名称
          success: function (res) {
            console.log("agentConfig权限成功返回信息:", res);
            wx.openEnterpriseChat({
              // 注意：userIds和externalUserIds至少选填一个。内部群最多2000人；外部群最多500人；如果有微信联系人，最多40人
              userIds: "", //参与会话的企业成员列表，格式为userid1;userid2;...，用分号隔开。
              externalUserIds: data.externalUserid, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
              groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
              chatId: "", // 若要打开已有会话，需指定此参数。如果是新建会话，chatId必须为空串
              success: function (res) {
                var chatId = res.chatId; //返回当前群聊ID，仅当使用agentConfig注入该接口权限时才返回chatId
                // 回调
              },
              fail: function (res) {
                Dialog.alert({
                  title: "提示",
                  message: "调用聊天窗口打开失败，请联系信息部进行处理",
                }).then(() => {
                  // on close
                });
                if (res.errMsg.indexOf("function not exist") > -1) {
                  alert("版本过低请升级");
                }
              },
            });
          },
          fail: function (res) {
            Dialog.alert({
              title: "提示",
              message: "调用聊天窗口鉴权失败，请联系信息部进行处理",
            }).then(() => {
              // on close
            });
            console.log("agentConfig权限失败返回信息:", res);
            if (res.errMsg.indexOf("function not exist") > -1) {
              alert("版本过低请升级");
            }
          },
        });
      });
    },
    getDetail(billId) {
      taskApi
        .getCustomerTaskById({ billId, userId: this.userId })
        .then((res) => {
          if (res.data) {
            res.data.isHYCar = res.data.isHYCar ? "是" : "否";
            this.dataSource = res.data;
            this.getCoupon(this.dataSource.carId);
            this.getCarInfoBase(this.dataSource.carId);
            // this.getApplyRecord()
            this.getRepairworkorder();

            window.scrollTo({
              top: 0,
              behavior: "smooth",
            });
          }
        });
    },
    // 获取卡券信息
    getCoupon(id) {
      repairApi.getCoupon({ id, userId: this.userId, isReturnInvalidCoupons: '是' }).then((res) => {
        this.cardList = res.data;
      });
    },
    // 车辆详情
    getCarInfoBase(id) {
      carApi.getCarInfoBase({ id }).then((res) => {
        if (res.code == 1) {
          res.data.label = res.data.label ? res.data.label.split(";") : [];
          if (res.data && res.data.label && res.data.label.length != 0) {
            res.data.label.length = res.data.label.length - 1;
          }

          this.carInfo = res.data;
          this.getRelevanceTask();

          // let  carInfo = {
          //   fixCenterId:this.carInfo.fixCenterId,
          //   fixCenterName: this.carInfo.fixCenterName,
          //   carModelId: this.carInfo.carModelNameId,
          //   carModelName: this.carInfo.carModelNameName,
          //   carNo: this.carInfo.carNo,
          // }
          // store.commit("setAddCarInfo",carInfo );
        }
      });
    },
    // 预约记录
    getApplyRecord() {
      repairApi
        .queryRepairBooking({
          ...this.applyParams,
          codeNo: this.dataSource.carNo || "",
        })
        .then((res) => {
          this.applyList = res.data;
        });
    },

    // 关联任务
    getRelevanceTask() {
      taskApi
        .getCustomerTaskList({
          ...this.relevanceParams,
          codeNo: this.dataSource.carNo || "",
          billId: this.dataSource.billId,
          carId: this.dataSource.carId,
          fixCenterId: this.dataSource.fixCenterId,
        })
        .then((res) => {
          this.relevanceList = res.data;
        });
    },

    // 履历
    getRepairworkorder(id) {
      carApi.getRepairworkorder({ id: this.dataSource.carId }).then((res) => {
        if (res.code == 0) {
          this.repairList = res.data;
        }
      });
    },

    //维修预约
    applyRepair() {
      this.$router.push({
        path: "applyRepairEdit",
        query: { taskId: this.dataSource.billId, carId: this.dataSource.carId },
      });
    },
    // 获取list名称
    getFieldName(list, key, val) {
      if (list && list.length > 0) {
        let obj = list.filter((item) => {
          return item[key] == val;
        });
        if (obj.length > 0) {
          return obj[0].name;
        }
      }
      return null;
    },
    // 图片预览
    previewImg() {
      ImagePreview([
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2020%2F555%2F900%2F14381009555_1565283795.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693918952&t=87f1097ef82261cd8c0511a89a676704",
      ]);
    },
    // 添加跟进记录
    addFollow() {
      if (this.dataSource.twoBillStatus == "邀约成功") {
        return;
      }
      localStorage.setItem("followId", this.detailId);
      this.$router.push({
        path: "/taskCenterEdit",
        // query: { billId: this.detailId },
      });
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`;
      } else {
        Toast("请在手机端使用此功能");
      }
    },
    goTaskDetail(data) {
      this.$router.push({
        path: "/taskCenterDetail",
        query: { billId: data.billId },
      });
    },
    goApplyDetail(data) {
      this.$router.push({
        path: "/applyRepairDetail",
        query: { billId: data.billId },
      });
    },
    goRepairDetail(data) {
      this.$router.push({
        path: "/repairOrderDetail",
        query: { billId: data.repairId },
      });
    },
    handChangeTab() {
      this.tabActive = 1;
      this.$nextTick(() => {
        // 获取目标元素
        let targetElement = document.getElementById("targetId");
        // 将滚动条定位到目标元素上方
        targetElement.scrollIntoView();
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  background: #f3f3f3;
  overflow: auto;
  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;
    position: relative;
    overflow: hidden;

    .factTask {
      position: absolute;
      right: -9px;
      top: -8px;
      color: #fff;
      background: #eb1717;
      font-size: 0.24rem;
      padding: 2px 10px;
      padding-top: 10px;
      transform: rotate(30deg);
    }
    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        align-items: center;
        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }
        .status {
          border: 1px solid #299a00;
          color: #299a00;
          padding: 0.05rem 0.2rem;
          text-align: center;
          font-size: 0.22rem;
          border-radius: 3px;
          margin-left: 0.2rem;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
        .name {
          border-right: 2px solid #ccc;
          padding-right: 0.1rem;
          margin-right: 0.1rem;
          &:last-child {
            border: 0;
          }
        }

        .isVip {
          background: #f59301;
          color: #fff;
          font-size: 0.24rem;
          border-radius: 2px;
          padding: 2px 10px;
        }
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .con_txt {
        font-size: 0.26rem;
        color: #161616;
        color: #35bc04;
      }
      .txt {
        font-size: 0.24rem;
        color: #161616;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // position: relative;
        // top: -2px;
        // color: #fff;
        // background: #35bc04;
        // font-size: 0.32rem;
        // padding: 0.1rem;
        // border-radius: 50%;
        // margin-right: 0.1rem;
      }
    }
  }
  .formData {
    background: #fff;
  }
}

.labelList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.label_item {
  color: #299a00;
  border: 1px solid #299a00;
  border-radius: 4px;
  margin-right: 0.1rem;
  padding: 0.01rem 0.2rem;
  font-size: 0.2rem;
  margin-bottom: 0.1rem;
  &:last-child {
    margin-right: 0;
  }
}
.tabBarBox {
  margin-top: 0.2rem;
}
.tabCar {
  margin-top: 0.1rem;
}
// 卡券
.cardList {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;

  .cardItem {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.2rem;
    .box {
      overflow: hidden;
      .cardItem_lt {
        padding: 0.3rem 0.2rem;
        text-align: center;
        box-sizing: content-box;
        background: #409eff;
        color: #fff;
        overflow: hidden;
        height: 1.4rem;
        width: 30%;
        .price_icon {
          font-size: 0.3rem;
          color: #fff;
          text-align: center;
          padding-top: 0.2rem;
          .txt {
            font-size: 0.6rem;
            font-weight: bold;
          }
        }
        .name {
          font-size: 0.28rem;
          color: #fff;
          margin-top: 0.1rem;
        }
        .price {
          color: #fff;
        }
      }
      .cardItem_rt {
        padding: 0.3rem;
        border-bottom: 1px dashed #ccc;
        overflow: hidden;
        height: 1.4rem;
        width: 70%;
        .label_name {
          .label_txt {
            background: #ff3415;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            padding: 0.07rem 0.2rem;
            font-size: 0.24rem;
            margin-right: 0.1rem;
          }
          .label_txt1 {
            color: #333;
            font-size: 0.28rem;
            font-weight: bold;
          }
        }
        .label_time {
          margin-top: 0.2rem;
          font-size: 0.26rem;
          color: #666;
        }
      }
    }
    .cardNo {
      padding: 0.2rem 0.3rem 0.2rem 0.2rem;
      font-size: 0.28rem;
      color: #333;
    }
  }
}

// 维修
.repairData {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  box-sizing: border-box;
  overflow: hidden;
  .repairItem {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    .item_title {
      justify-content: space-between;
      padding: 0.1rem 0.1rem 0.2rem 0.3rem;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.28rem;
      margin-bottom: 0.3rem;
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 3px;
        height: 15px;
        background: #409eff;
        position: absolute;
        left: 0;
        top: 5px;
      }
    }
    .item_content {
      padding: 0 0.3rem;
      .item_contentbox {
        justify-content: space-between;
      }
      .item_data {
        font-size: 0.28rem;
        margin-bottom: 0.2rem;
        display: flex;
        &.item_remark {
          display: block;
        }
        .item_data_label {
          color: #808080;
        }
        .item_data_value {
          color: #333;
          &.txt {
            line-height: 0.32rem;
          }
        }
      }
      .item_data_width {
        float: left;
      }
    }
  }
}

// 联系人
.contactbox {
  margin: 0.1rem 0.2rem 0.3rem 0.2rem;
  .contactItem {
    justify-content: space-between;
    background: #fff;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    border-radius: 4px;
    .contact_lt {
      .header {
        margin-bottom: 0.2rem;
        color: #333;

        .txt {
          font-size: 0.2rem;
          margin-right: 0.2rem;
          background: #409eff;
          padding: 0.1rem 0.2rem;
          border-radius: 4px;
          color: #fff;
        }
        .name {
          font-size: 0.28rem;
        }
      }
      .tel {
        font-size: 0.3rem;
        color: #333;
      }
    }
    .contact_rt {
      .icon-wx {
        font-size: 0.7rem;
        color: #409eff;
      }
      .icon-tel {
        font-size: 0.64rem;
        color: #35bc04;
        margin-right: 0.1rem;
        // font-size: 0.36rem;
        // background: #35bc04;
        // color: #fff;
        // text-align: center;
        // padding: 0.1rem;
        // border-radius: 50%;
        // position: relative;
        // top: -6px;
        // margin-right: 0.1rem;
      }
    }
  }
}
.addBtn {
  position: fixed;
  bottom: 0.8rem;
  width: 100%;
  z-index: 1;
  .orderItem_filebox {
    width: 2.8rem;
    margin: auto;
    text-align: center;
    font-size: 0.28rem;
    background: #409eff;
    color: #fff;
    padding: 0.25rem 0rem;
    border-radius: 50px;
    &.btn_disable {
      background: #b8b8b8;
    }
  }
}
.relationTitle {
  padding-left: 0.2rem;
  border-left: 4px solid #409eff;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.26rem;
  margin-bottom: 0.2rem;
}
.orderList {
  margin: 0.2rem;
  overflow: hidden;
  // padding-bottom: 1.5rem;
  .orderItem {
    padding: 0.3rem;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    .orderItem_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #f6f6f6;
      position: relative;
      .orderItem_lt {
        .carNo {
          font-size: 0.3rem;
          color: #333;
          margin-right: 0.2rem;
          font-weight: bold;
        }

        .carStatus {
          background: #35bc04;
          color: #fff;
          border-radius: 4px;
          padding: 0.1rem 0.2rem;
          font-size: 0.24rem;
          text-align: center;
          width: 1rem;
          margin-top: 0.1rem;
        }
      }
      .orderItem_rt {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        color: #666;
        font-size: 0.28rem;

        .txt {
          font-size: 0.28rem;
          color: #161616;
        }
        .icon-tel {
          font-size: 0.64rem;
          color: #35bc04;
          margin-right: 0.1rem;
          // color: #fff;
          // background: #35bc04;
          // font-size: 0.32rem;
          // padding: 0.1rem;
          // border-radius: 50%;
          // margin-right: 0.2rem;
        }
        .icon-wx {
          color: #409eff;
          font-size: 0.65rem;
        }
      }
    }
    .orderItem_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      .orderItem_data {
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        width: 50%;
        margin-bottom: 0.2rem;
        font-size: 0.28rem;
        box-sizing: content-box;
        color: #333;
        .order_label {
          font-size: 0.28rem;
          color: #333;
          width: 70px;
          margin-right: 10px;
        }
        .txt {
          font-size: 0.28rem;
          color: #666;
          flex: 1;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
        }
        &.time {
          width: 100%;
        }
      }
    }
    .orderItem_file {
      background: #ebebeb;
      color: #333;
      border-radius: 5px;
      padding: 0.2rem 0;
      text-align: center;
      width: 100%;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .file_item {
        width: 33.33%;
        border-right: 1px solid #ccc;
        .icon-tel {
          font-size: 0.34rem;
          color: #35bc04;
          margin-right: 0.1rem;
        }
        .icon-mileage {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        .icon-gw {
          font-size: 0.4rem;
          color: #409eff;
          margin-right: 0.1rem;
          position: relative;
          top: 0.04rem;
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}

// 跟进信息
.followInfo {
  padding: 0.2rem;
  background: #fff;
  padding-bottom: 60px;
  .followInfo_item {
    margin-bottom: 0.2rem;
    position: relative;
    .followInfo_lt {
      width: 20%;
      .followInfo_time {
        font-size: 0.26rem;
        color: #999;
        position: absolute;
        top: 3px;
        left: -21px;
        width: 100px;
        text-align: center;
      }
      &::before {
        content: "";
        height: 130px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 30px;
        left: 0.6rem;
      }
      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 40px;
        left: 0.42rem;
        background: #fff;
      }
    }
    .followInfo_rt {
      background: #f1f1f1;
      width: 80%;
      padding: 0.3rem 0 0.3rem 0.3rem;
      border-radius: 4px;

      .followInfo_num {
        font-size: 0.28rem;
        color: #333;
        margin-bottom: 0.1rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
      }
      .followInfo_data {
        font-size: 0.26rem;
        color: #666;
        margin-bottom: 0.1rem;
        .followInfo_img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
}
.noContent {
  margin-top: 2rem;
}
.martop {
  margin-top: 0rem !important;
}
.contact_list {
  padding: 0.5rem 0.2rem 0 0.2rem;
  .contact_item {
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .contact_lt {
    font-size: 0.28rem;
    color: #23ec1c;
    .contact_header {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 5px;
      margin-right: 5px;
    }

    .contact_name {
      font-size: 0.28rem;
      color: #333;
      margin-left: 5px;
      flex: 1;
    }
    .contact_com {
      color: #f65e07;
      font-size: 0.28rem;
    }
    .contact_com_wx {
      color: #23ec1c;
      font-size: 0.28rem;
      width: 50px;
      text-align: center;
    }
  }
  .contact_btn {
    background: #409eff;
    color: #fff;
    padding: 5px 0;
    text-align: center;
    border-radius: 3px;
    font-size: 0.28rem;
    width: 60px;
  }
}
</style>
